<!--  -->
<template>
  <div class='content'>
    <van-popup 
      v-model="cardShow" 
      round 
      position="bottom" 
      @close="downTagPop"
      
      >
      <div class="bank-title flex-a-c flex-j-c">
        <h3>选择卡类型</h3>
        <div class="bank-close iconfont icon-close11" @click.stop="downTagPop"></div>
      </div>
      <div class="bank-list" >
        <block v-for="(item,index) in cardList" :key="index">
          <div class="bank-item flex" @click="cardClick(item,index)">
            <div class="bank-text flex-j-sb flex-a-c" :class="bankIndex == item.id?'on':''">
              <p>{{item.text}}</p>
              <span class="iconfont icon-all_select_choose" v-show="bankIndex == item.id"></span>
            </div>
          </div>
        </block>
      </div>
      
    </van-popup>
  </div>
  </template>
  
  <script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  
  export default {
  name:'',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props:{
    cardList:{
      type:Array,
      default:[]
    },
    cardShow:{
      type:Boolean,
      default:false
    },
    bankIndex:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    downTagPop() {
      this.$emit('update:cardShow', false);
    },
    cardClick(item,index) {
      this.$emit('cardClick', {item:item,index:index});
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
  </script>
  <style lang="scss" scoped>
  /* @import url(); 引入公共css类 */
    .bank-title {
      padding:20px 0 20px 0;
      h3 {
        font-weight: bold;
        font-size: 16px;
        color: #00001C;
        text-align: center;
       
      }
      .bank-close {
        display: flex;
        // flex:1;
        // width: 20%;
        // align-self: flex-end;
        // justify-content: flex-end;
        color: #AAAAB3;
        padding:0 18px 0 0;
        position: absolute;
        right: 0;
      }
    }
    .bank-list {
      padding:0 14px 40px 14px;
      
      .bank-item {
        width:100%;
        .bank-icon {
          padding:18px 0;
        }
        .bank-text {
          padding:18px 0 18px 10px;
          font-weight: 500;
          font-size: 14px;
          color: #00001C;
          border-bottom: 1px solid #F0F0F1;
          flex:1;
          text-align: left;
          .icon-all_select_choose {
            color:#F15353;
          }
        }
        .on {
          color: #F15353;
        }
      }
    }
  </style>